<template>
  <Card>
    <div class="searchBox">
      <Form :label-width="90" :model="searchForm" inline>
        <Form-item label="搜索姓名：" prop="license_plate_num">
          <Input
            v-model="searchForm.name"
            clearable
            placeholder="请输入姓名"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <!-- <Form-item label="车辆线路：" prop="line">
          <Select clearable placeholder="选择线路" style="width:200px;" v-model="searchForm.line">
            <Option value="-1">全部</Option>
            <Option :key="item.value" :value="item.value" v-for="item in lines">{{ item.label }}</Option>
          </Select>
        </Form-item> -->
        <Form-item label="车牌号：" prop="license_plate_num">
          <Input
            v-model="searchForm.license_plate_num"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item label="日期范围：" prop="date">
          <DatePicker
            v-model="searchForm.date"
            placeholder="请选择日期范围"
            placement="bottom-start"
            style="width: 200px"
            type="daterange"
            @on-change="dateChange"
          ></DatePicker>
        </Form-item>
        <Form-item style="margin-left:-90px">
          <Button icon="md-search" type="primary" @click="getAccidentList">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div class="btns">
      <Button
        v-if="displayAddBtn"
        icon="md-add"
        style="margin-bottom:10px"
        type="primary"
        @click="toAdd"
      >添加
      </Button>
    </div>
    <Table
      :columns="columns"
      :data="data"
      :loading="loading"
      border
      height="650"
      size="small">
      <template slot="action" slot-scope="{ row }">
        <Button :style="row.addStyle" ghost type="text" @click="preview(row)">查看</Button>
        <Button
          :disabled="row.editDisabled"
          :style="row.editStyle"
          ghost
          type="text"
          @click="edit(row)"
        >编辑
        </Button>
        <Button
          :disabled="row.delDisabled"
          :style="row.delStyle"
          ghost
          type="text"
          @click="del(row)"
        >删除
        </Button>
      </template>
    </Table>
  </Card>
</template>
<script>
import {accidentList, destroyAccident} from '../../api/accident'

export default {
  data() {
    return {
      displayAddBtn: false,
      loading: false,
      searchForm: {
        name: '',
        // line: '-1',
        date: ['', ''],
        license_plate_num: '',
      },
      lines: [],
      columns: [
        {
          title: '案号',
          width: 120,
          key: 'case_number',
          align: 'left',
          fixed: 'left'
        },
        {
          title: '车牌号',
          key: 'license_plate_num',
          width: 120,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '事故时间',
          key: 'date',
          // width: 150,
          align: 'center'
        },
        {
          title: '驾驶员',
          key: 'driver',
          // width: 120,
          align: 'center'
        },
        {
          title: '事故描述',
          key: 'accident_info',
          align: 'center'
        },
        {
          title: '节点状态',
          key: 'status_role',
          // width: 200,
          align: 'left'
        },
        {
          title: '操作',
          slot: 'action',
          width: 230,
          fixed: 'right',
          align: 'center'
        }
      ],
      data: []
    }
  },
  watch: {
    $route(to, from) {
      if (from.name !== 'accidentList') {
        this.handleReset()
      }
    }
  },
  mounted() {
    this.setButtonStatus()
    this.init()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    setButtonStatus() {
      const roleName = this.$store.getters.user.roleName
      // 非司机用户，隐藏按钮和功能
      this.displayAddBtn = roleName.indexOf('事故-事故处理部') === 0
    },
    dateChange(e) {
      this.searchForm.date = e
    },
    preview(row) {
      const nodeKey = row.process
        ? row.process.node
          ? row.process.node.node_key
          : ''
        : ''
      this.$router.push({
        name: 'accidentDetail',
        params: {
          id: row.id,
          status: row.status,
          nodeKey: nodeKey
        }
      })
    },
    edit(row) {
      const nodeKey = row.process
        ? row.process.node
          ? row.process.node.node_key
          : ''
        : ''
      this.$router.push({
        name: 'editAccident',
        params: {
          id: row.id,
          status: row.status,
          nodeKey: nodeKey
        }
      })
    },
    getAccidentList() {
      this.loading = true
      accidentList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.accidentRecord
          this.searchForm.date = res.data.date
        }
      })
    },
    handleReset() {
      this.searchForm = {
        name: '',
        // line: '-1',
        license_plate_num: '',
        date: ['', ''],
      }
      // 重新加载数据
      this.getAccidentList()
    },
    handleSearch() {
    },
    init() {
      this.getAccidentList()
    },
    toAdd() {
      this.$router.push('/accident/add')
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const id = row.id
          destroyAccident(id).then(res => {
            this.$Modal.remove()
            if (res.data) {
              this.$Message.success(res.message)
              this.getAccidentList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>
